<template>
   <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px;margin-right: 10px;" placeholder="请输入联赛名称" suffix-icon="el-icon-search" v-model="leagueName"></el-input>
      <el-select v-model="leagueSeason" clearable placeholder="请选择联赛赛季" style="width: 200px;margin-right: 10px;">
        <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
            {{ item.name }}
        </el-option>
      </el-select>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
<!--      <el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">-->
<!--        <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>-->
<!--      </el-upload>-->
<!--      <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>-->
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="leagueName" label="联赛名称"></el-table-column>
      <el-table-column prop="leagueImg" label="联赛标志">
        <template slot-scope="scope">
          <div v-if="scope.row.leagueImg">
             <img :src="scope.row.leagueImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="leagueProfile" label="联赛简介" width="300px"></el-table-column>
      <el-table-column prop="leagueRounds" label="联赛轮数"></el-table-column>
      <el-table-column prop="leagueSeason" label="联赛赛季"></el-table-column>
      <el-table-column label="操作"  width="280" align="center">
        <template slot-scope="scope">
          <el-button type="info" @click="handleteamEdit(scope.row)" ><i class="el-icon-collection-tag"></i>编辑参赛球队</el-button>
          <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="联赛信息" :visible.sync="dialogFormVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="联赛名称">
          <el-input v-model="form.leagueName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联赛标志">
          <el-upload 
            class="avatar-uploader"
            :action="'http://' + serverIp +':9090/file/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="form.leagueImg" :src="form.leagueImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>

        <el-form-item label="联赛简介" >
          <el-input type="textarea" v-model="form.leagueProfile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联赛轮数">
          <el-input v-model="form.leagueRounds" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联赛赛季">
          <el-select clearable v-model="form.leagueSeason" placeholder="请选择联赛赛季" style="width: 100%">
            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
              <i :class="item.value" /> {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="球队分配" :visible.sync="teamDialogVis" width="30%">
      <el-tree
          :props="props"
          :data="teamData"
          show-checkbox
          node-key="id"
          ref="tree"
          :check-strictly="true"
          :default-expanded-keys="expends"
          :default-checked-keys="checks">
         <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.teamName }}</span>
         </span>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="teamDialogVis = false">取 消</el-button>
        <el-button type="primary" @click="saveLeagueTeam">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name:'League',
  data(){
    return{
      
      tableData: [],
      total: 0,//总数
      current: 1,//当前页
      size: 5,//每页数量
      leagueName:"" ,//联赛名搜索输入框
      leagueSeason:"",//联赛赛季选择框
      form:{},//添加或修改提交表单
      dialogFormVisible: false,
      multipleSelection: [],
      options:[],
      serverIp: serverIp,
      teamData:[],//联赛球队分配表单
      teamDialogVis:false,
      expends: [],
      checks: [],
      leagueId:0,
      props: {
        label: 'teamName',
      },
    }
  },
  created(){
    this.load()
  },
  methods:{
    load(){
      this.request.get("/league/pageLeague", {
        params: {
          current: this.current,
          limit: this.size,
          leagueName: this.leagueName,
          leagueSeason:this.leagueSeason
        }
      }).then(res => {
        this.tableData = res.pageLeague.records
        this.total = res.total
      })

      // 请求赛季的数据
      this.request.get("/league/season").then(res => {
        console.log(res)
        this.options = res.data
      })
    },
    //添加或修改联赛信息
    save() {
      this.request.post("/league/saveOrUpdate", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    //联赛绑定球队
    saveLeagueTeam(){
      this.request.post("/league/leagueTeam/"+this.leagueId,this.$refs.tree.getCheckedKeys()).then(res =>{
        if(res.code === '200'){
          this.$message.success("编辑成功")
          this.teamDialogVis = false

        }else{
          this.$message.error(res.msg + "编辑失败")
        }
      })
    },
    //保存图片
    handleAvatarSuccess(res) {
      this.form.leagueImg = res
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
    del(id) {
      this.request.delete("/league/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      this.request.post("/league/delete/batch", ids).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.leagueName = ""
      this.leagueSeason = ""
      this.load()
    },
    //分页每页大小
    handleSizeChange(size) {
      console.log(size)
      this.size = size
      this.load()
    },

    //分页第几页
    handleCurrentChange(current) {
      console.log(current)
      this.current = current
      this.load()
    },

    async handleteamEdit(league){
      this.leagueId= league.id
      
      //请求球队数据
      this.request.get("/team/findall").then(res =>{
        this.teamData = res.data

        //把后台返回的球队数据处理成id数组
        this.expends = this.teamData.map(v =>v.id)
      })

      //查看该参加该联赛的球队列表 勾选参加的球队id
      this.request.get("/league/leagueTeam/"+this.leagueId).then(res=>{
        this.checks = res.data
        this.ids.forEach(id=>{
          this.$nextTick(() => {
              this.$refs.tree.setChecked(id, false)
            })
        })
      })
      this.teamDialogVis = true;
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>